<template>
  <div>
    <van-list
      v-model="loading"
      :finished="finished"
      :offset="80"
      @load="loadMore">
      <div v-if="orderList.length > 0">
        <div v-for="item in orderList" :key="item.order_refund_id" class="order-list">
          <div class="order-list-item">
            <div class="top-part">
              <div class="title">退单号：{{ item.order_refund_sn }}</div>
              <div class="status fr">
                <span v-if="item.status === 0">待处理</span>
                <span v-if="item.status === 1">收货确认</span>
                <span v-if="item.status === 2">退款确认</span>
                <span v-if="item.status === 3">已完成</span>
                <span v-if="item.status === 4">已作废</span>
              </div>
            </div>
            <div class="top-part" v-if="item.order_sn">
              <div class="title">关联订单号：{{ item.order_sn }}</div>
            </div>
            <tpl-goods-slide :item-list="item.item_list"/>
            <div class="middle-part">
              <div class="inline">
                <span class="timer">退单时间：{{ item.created_at }}</span>
                <div class="fr">
                  <span class="label">退单金额:  </span>
                  <span class="txt">&yen; {{ Number(item.pay_fee).toFixed(getitem.item_price_p) }}</span>
                </div>
              </div>
            </div>
            <div class="bottom-part">
              <van-button size="small" class="btn" type="default" @click="goToDetail(item)">退单详情</van-button>
              <van-button v-if="item.is_button == 1" class="btn btn-orange" size="small" type="default" @click="payEvent(item)">取消退单</van-button>
            </div>
          </div>
        </div>
      </div>
    </van-list>
    <div v-if="orderList.length == 0 && !loading" class="noData">
      <div class="content">
        <img src="../../../assets/images/noData/noDataOrder.png" alt="">
        <div class="text">暂无退单</div>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { OrderRefundList } from '@/api/refund'
  import tplGoodsSlide from './tplGoodsSlide'
  export default {
    name: 'TplList',
    components: {
      tplGoodsSlide
    },
    data() {
      return {
        payType: undefined,
        getAllData: false, // 为true时加载完全部数据
        orderList: [],
        loading: false,
        finished: false,
        formData: {
          p: 1,
          limit: 5
        }
      }
    },
    computed: {
      ...mapGetters([
        'getitem'
      ])
    },
    methods: {
      loadMore() {
        // 数据全部加载完成
        this.getOrderListFn()
      },
      goToDetail(row, type) {
        this.$router.push({
          name: 'refund-detail',
          query: {
            id: row.order_refund_id,
            type: type
          }
        })
      },
      // 获取订单列表
      getOrderListFn() {
        OrderRefundList(this.formData).then(res => {
          // 异步更新数据
          this.loading = false
          const data = res.data
          if (data.status_code === 200) {
            const orderList = this.orderList
            const newArr = orderList.concat(data.data.list)
            this.orderList = newArr
            this.formData.p++
            if (this.orderList.length >= data.data.count) {
              this.finished = true
              this.getAllData = true
            }
            this.formattingSkuName(this.orderList)
          } else {
            this.orderList = []
            this.finished = true
          }
        })
      },
      // 修改返回的JSON
      formattingSkuName(data) {
        data.forEach(itemList => {
          if (itemList.item_list) {
            itemList.item_list.forEach(skuList => {
              if (skuList.sku_name) {
                const reg1 = new RegExp('[{}"]*', 'g')
                const reg2 = new RegExp(':', 'g')
                const reg3 = new RegExp(',', 'g')
                skuList.sku_name =
                  skuList.sku_name
                    .replace(reg1, '')
                    .replace(reg2, '：')
                    .replace(reg3, '，')
              }
            })
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "src/styles/mixin.scss";
  .order-list{
    margin-bottom: pxCalc(5px);
    background: #fff;
    padding-left: pxCalc(20px);
    &-item{
      .top-part{
        height: 42px;
        line-height: 42px;
        font-size: pxCalc(14px);
        padding-right: pxCalc(20px);
        border-bottom: pxCalc(1px) solid #e5e5e5;
        .title{
          color: #363b43;
          display: inline-block;
        }
        .status{
          display: inline-block;
          color: #fea321;
        }
      }
      .middle-part2{
        border-bottom: pxCalc(1px) solid #e5e5e5;
        font-size: 0;
        .good-info{
          padding: pxCalc(15px) pxCalc(20px) pxCalc(15px) 0;
          &.hidden{
            height: 0;
            overflow: hidden;
          }
          .inline{
            font-size: pxCalc(13px);
            line-height: 24px;
            color: #6c6c6c;
            .price{
              color: #000;
            }
          }
        }
      }
      .middle-part{
        padding-right: pxCalc(20px);
        border-bottom: pxCalc(1px) solid #e5e5e5;
        padding: pxCalc(15px) 0;
        background-color: #fff;
        font-size: 0;
        .inline{
          display: block;
          font-size: pxCalc(13px);
          padding-right: pxCalc(20px);
          .timer{
            color: #999999;
          }
          .label{
            color: #363b43;
          }
          .txt{
            color: #ff0000;
            font-size: pxCalc(14px);
          }
        }
      }
      .bottom-part{
        text-align: right;
        padding: pxCalc(15px) pxCalc(20px) pxCalc(15px) 0;
        font-size: 0;
        .btn{
          margin: 0 pxCalc(5px);
          /*border-radius: pxCalc(5px);*/
          &.btn-orange{
            background: #ff7340!important;
            border: pxCalc(1px) solid #ff7340;
            color: #fff;
            &:active{
              background: #e26739;
            }
          }
        }
      }
    }
  }
</style>
